<template>
	<view class="query-policy">
		<u-tabs :list="tabList" :is-scroll="false" :current="currentIndex" @change="change"></u-tabs>
		<view class="screen" @click="isScreen=true">
			<text>筛选</text>
			<u-icon name="arrow-down-fill" color="#AAAAAA" size="20" class="icon"></u-icon>
		</view>
		<view class="query-policy-contain">
			<view class="my-policy-list" v-if="currentIndex==0">
				<view class="item" v-for="(item,index) in myPolicyList" :key="secondKey('A',index)" @click="navItem(item)">
					<text>{{item.policyName}}</text>
					<view class="time">
						<text>{{item.addDate}}</text>
						<u-icon name="arrow-right" color="#AAAAAA" size="20" class="icon"></u-icon>
					</view>
				</view>
			</view>
			<view class="directly-policy-list" v-if="currentIndex==1">
				<view class="item" v-for="(item,index) in directlyPolicyList" :key="secondKey('B',index)">
					<text class="name">{{item.agentName}}</text>
					<view class="agent-info">
						<view class="left">
							<text>代理商编号：{{item.agentNo}}</text>
							<text>产品政策：{{item.policyName}}</text>
							<text>开通日期：{{item.addDate}}</text>
						</view>
						<u-button class="right" type="primary" shape="circle" hover-class="none"
							@click="navItem(item)">修改</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="isScreen" mode="bottom" border-radius="14">
			<view class="search-box">
				<view class="title">选择筛选条件</view>
				<template v-if="currentIndex!=0">
					<view>开通日期</view>
					<view class="open-time">
						<view class="open-time-box">
							<u-icon name="calendar" color="#AAAAAA" size="32" class="icon"></u-icon>
							<u-field v-model="queryParams.startDate" label-width="0" :disabled="true" clickable
								name="datetimePicker" placeholder="请选择开始日期" @click="fieldTimeHandle(1)" />
						</view>
						<view class="open-time-box">
							<u-icon name="calendar" color="#AAAAAA" size="32" class="icon"></u-icon>
							<u-field v-model="queryParams.endDate" label-width="0" :disabled="true" clickable
								name="datetimePicker" placeholder="请选择结束日期" @click="fieldTimeHandle(2)" />
						</view>
					</view>
					<u-field label-width="180" v-model="queryParams.agentNo" label="代理商编号" placeholder="请填写代理商编号">
					</u-field>
					<u-field label-width="180" v-model="queryParams.agentName" label="代理商名称" placeholder="请填写代理商名称">
					</u-field>
					<!-- <u-field label-width="180" v-model="shareSettleName" label="分润结算类型" placeholder="请选择分润结算类型"
						@click="isShareSettle=true" right-icon="arrow-down-fill"></u-field> -->
				</template>
				<u-field label-width="180" v-model="queryParams.policyCode" label="产品政策代码" placeholder="请填写产品政策代码">
				</u-field>
				<view class="bottom-btn">
					<view class="right right-btn btn" @click="resetHandel">重置</view>
					<view class="btn">
						<u-button class="right right-btn" shape="circle" hover-class="none" @click="determineHandel">完成
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker mode="time" v-model="showPicker" title="选择年月日" @confirm="pickerConfirmHandle"
			@cancel="showPicker = false" />
		<u-select v-model="isShareSettle" :list="shareSettleOptions" label-name="dictLabel" value-name="dictValue"
			@confirm="confirmShareSettle"></u-select>
		<uni-load-more :status="loadMore"></uni-load-more>
	</view>
</template>

<script>
	import {
		getFormDate
	} from "_c/utils/date";
	import {
		listData,
		myPolicyList
	} from "@/api/agent-open";
	import loadMoreData from "@/mixins/loadmore";
	export default {
		mixins: [loadMoreData],
		data() {
			return {
				tabList: [{
					name: " 我的政策"
				}, {
					name: "直属代理商政策"
				}],
				currentIndex: 0,
				isScreen: false,
				myPolicyList: [],
				directlyPolicyList: [],
				queryParams: {},
				tradTimeType: 1,
				showPicker: false,
				shareSettleOptions: [{
					dictLabel: "结给直属",
					dictValue: "0"
				}, {
					dictLabel: "结给上级",
					dictValue: "1"
				}],
				isShareSettle: false,
				shareSettleName: "",
				loadMore: 1,
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.queryParams,
				};
				if (this.currentIndex == 0) {
					myPolicyList(params).then((response) => {
						let list = response.rows;
						this.loadMoreStatusDeal(list);
						if (list.length > 0) {
							this.myPolicyList = this.myPolicyList.concat(list);
						}
					});
				} else {
					listData(params).then((response) => {
						let list = response.rows;
						this.loadMoreStatusDeal(list);
						if (list.length > 0) {
							this.directlyPolicyList = this.directlyPolicyList.concat(list);
						}
					});
				}


			},
			reachBottomCallBack() {
				this.getList();
			},
			init() {
				this.$nextTick(() => {
					this.myPolicyList = [];
					this.directlyPolicyList = [];
				});
			},
			change(index) {
				this.currentIndex = index;
				// this.queryParams.agentType = index == 0 ? 2 : 0;
				this.pageNum = 1;
				this.myPolicyList = [];
				this.directlyPolicyList = [];
				this.getList();
			},
			// 日期选择
			fieldTimeHandle(type) {
				this.tradTimeType = type;
				this.showPicker = true;
			},
			// 日期确认
			pickerConfirmHandle(value) {
				if (this.tradTimeType === 1) {
					this.queryParams.startDate = getFormDate(value);
				} else {
					this.queryParams.endDate = getFormDate(value);
				}
				this.showPicker = false;
			},
			// 类型确认
			confirmShareSettle(e) {
				this.queryParams.shareSettleModel = e[0].value;
				this.shareSettleName = e[0].label;
			},
			// 重置
			resetHandel() {
				this.queryParams = {};
				this.shareSettleName = "";
			},
			// 搜索确定
			determineHandel() {
				this.$forceUpdate();
				this.init();
				this.pageNum = 1;
				this.myPolicyList = [];
				this.directlyPolicyList = [];
				this.getList();
				this.isScreen = false;
			},
			// 页面跳转
			navItem(item) {
				this.$nav.push({
					path: '/pages/home/policy/policyInfo',
					query: {
						agentNo: item.agentNo,
						policyCode: item.policyCode,
						type: this.currentIndex,
					}
				})
			},
			secondKey(first, second){
			    return `${first}_${second}`  
			}, 
		}
	}
</script>

<style lang="scss">
	.query-policy {
		.screen {
			width: 90%;
			text-align: right;
			margin: R(20) auto;
			color: #AAAAAA;
		}

		&-contain {
			.my-policy-list {
				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.time {
						color: #AAAAAA;
					}
				}
			}

			.directly-policy-list {
				.item {
					.name {
						font-size: R(28);
						font-weight: 600;
						color: #1A1A1A;
					}

					.agent-info {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							display: flex;
							flex-direction: column;
							flex: 2;
							color: #8C8C8C;

							text {
								margin-top: R(10);
							}
						}
					}
				}
			}
		}

		.search-box {
			margin: R(30);

			.title {
				text-align: center;
				font-weight: 400;
				font-size: R(30);
			}

			.open-time {
				display: flex;
				justify-content: space-between;

				&-box {
					display: flex;
				}
			}

			.bottom-btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: R(30) 0;

				.btn {
					text-align: center;
					line-height: R(50);
				}
			}
		}
	}

	.icon {
		margin-left: R(10);
	}

	.item {
		margin: R(20);
		background-color: #FFFFFF;
		border-radius: R(10);
		padding: R(30);
	}

	.right-btn {
		width: R(130);
		height: R(50) !important;
	}

	.u-label {
		flex: 0 0 80px !important;
	}
</style>